<template>
  <div class="my-order">
    <van-tabs color="#59b371" :active="0" bind:change="onChange">
      <van-tab title="全部">
        <div class="all">
          <div class="item-wrapper">
            <div class="head">
              <div class="status">待付款</div>
              <div class="timer"><van-icon name="clock-o"></van-icon>剩余12小时30分</div>
            </div>
            <div class="content">
              <div class="item">
                <van-row gutter="14">
                  <van-col span="6" class="good-img">
                    <div class="img">
                      <img src="https://dummyimage.com/400x400/e1e1e1/000.png&text=1" alt>
                    </div>
                  </van-col>
                  <van-col span="18" class="info-area">
                    <div class="item-info">
                      <div class="name">吉祥一家-长隆森地国内公园野营两天一夜亲子活动含帐篷一顶</div>
                      <div class="price-amount">
                        <van-row>
                          <van-col span="22">
                            <div class="price">
                              <van-icon class="_icon" name="points"></van-icon>146
                              <span class="unit">元/人</span>
                            </div>
                          </van-col>
                        </van-row>
                      </div>
                      <div class="booking-info">数量： 1</div>
                    </div>
                  </van-col>
                </van-row>
              </div>
              <div class="item">
                <van-row gutter="14">
                  <van-col span="6" class="good-img">
                    <div class="img">
                      <img src="https://dummyimage.com/400x400/e1e1e1/000.png&text=2" alt>
                    </div>
                  </van-col>
                  <van-col span="18" class="info-area">
                    <div class="item-info">
                      <div class="name">吉祥一家-长隆森地国内公园野营两天一夜亲子活动含帐篷一顶</div>
                      <div class="price-amount">
                        <van-row>
                          <van-col span="22">
                            <div class="price">
                              <van-icon class="_icon" name="points"></van-icon>138
                              <span class="unit">元/人</span>
                            </div>
                          </van-col>
                        </van-row>
                      </div>
                      <div class="booking-info">数量： 2</div>
                    </div>
                  </van-col>
                </van-row>
              </div>
            </div>
            <div class="footer">
              <div class="timer">2019-02-28</div>
              <div class="handler-btn">
                <van-button type="default">取消订单</van-button>
                <van-button type="primary" class="pay-btn">立即付款</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待付款">待付款</van-tab>
      <van-tab title="已付款">已付款</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style lang="sass">
@import "../../../common/style/variable.sass"
$item-height: 180rpx
page
  height: 100%
  .all
    padding: 20rpx
    .item-wrapper
      border: 1rpx solid #e1e1e1
      border-radius: 10rpx
      .head
        box-sizing: border-box
        padding: 0rpx 16rpx
        height: 80rpx
        line-height: 80rpx
        font-size: 30rpx
        border-bottom: 1rpx solid #e1e1e1
        .status,.timer
          display: inline-block
          width: 50%
        .status
          text-indent: 10rpx
          color: $theme-color
        .timer
          text-align: right
          color: $grey-font-color
      .content
        padding: 0rpx 20rpx
        .item
          padding: 15rpx 0rpx
          .van-col
              display: inline-block
              height: $item-height
          .good-img
              height: $item-height
              .img
                  width: 100%
                  height: 100%
                  image
                      display: inline-block
                      width: 100%
                      height: 100%
          .info-area
              .item-info
                  .name
                      font-size: 30rpx
                      font-weight: bold
                  .price-amount
                      font-size: 28rpx
                      margin: 10rpx 0
                      .van-col
                          display: inline-block
                          height: auto
                      .price
                          ._icon
                              color: #f7a64a
                              margin-right: 14rpx
                              font-size: 28rpx
                              font-weight: bold
                          .unit
                              font-size: 18rpx
                  .booking-info
                      font-size: 30rpx
                      color: #a1a1a1
      .footer
        height: 110rpx
        line-height: 110rpx
        box-sizing: border-box
        border-top: 1rpx solid #e1e1e1
        padding: 0rpx 16rpx
        .timer,.handler-btn
          width: 50%
          display: inline-block
          font-size: 30rpx
        .timer
          width: 35%
          color: $grey-font-color
        .handler-btn
          width: 65%
          text-align: right
          van-button
            .van-button
              height: 60rpx
              line-height: 60rpx
              margin-bottom: 15rpx
              margin-left: 20rpx
</style>
